<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>同来创抽奖中心</title>
<link href="/Public/zhuanpan/css/jq22.css" rel="stylesheet" type="text/css">
<style>
.container{
	margin: 0 auto;
}
.content{
	position: absolute;
	width: 100%;
	height: auto;
	margin: 0px auto;
	margin-top: 58%;
}
.jihui span{padding-left:5px;padding-right:5px;}
.layui-layer-page .layui-layer-content{width:95%;margin:auto;}
</style>

</head>
<body> 
<!-- <img class="zhuangshi" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%;display:block;width:100%;position:absolute;z-index:9999;" /> -->

<div class="title"><img src="/Public/zhuanpan/images/title.png"></div>
<img src="/Public/zhuanpan/images/game-bg.jpg" style="position:absolute;width:100%;height:100%;">
<div class="jihui">
    您还有<span>{$user['zp_cishu']}</span>次机会
  </div>

<div class="content" style="margin-top:58%;">
	{$pic}
	<img class="zhuangshi" style="width:86%;margin-left:7%;position:absolute;margin-top:-58px;z-index:3" src="/Public/zhuanpan/images/turnplate-bg.png"/>
	<div class="banner">
		<div class="turnplate">
			<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
			<img class="pointer" src="/Public/zhuanpan/images/turnplate-pointer.png">
		</div>
	</div>
	<img class="di" style="width:56%;margin-left:22%;position:absolute;margin-top:-32px;z-index:1" src="/Public/zhuanpan/images/di.png"/>
</div>

<div id="sbtn">
	<a href="#" id="sbtn_guizhe"><img src="/Public/zhuanpan/images/btn-rule.png"></a>
	<a href="#" id="sbtn_zhongjiang"><img src="/Public/zhuanpan/images/btn-zjcx.png"></a>
</div>
<div id="guizhe" style="display: none;">
	{:htmlspecialchars_decode($lipin[0]['content'])}
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="/Public/js/layer/layer-min.js"></script><!-- 弹窗js 参考文档 http://layer.layui.com/-->
<script type="text/javascript" src="/Public/zhuanpan/js/awardRotate.js"></script>
<script type="text/javascript">
document.body.addEventListener('touchmove', function (e) {
    e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
  }, {passive: false}); //passive 参数不能省略，用来兼容ios和android
  
var turnplate={
		restaraunts:[],				//大转盘奖品名称
		colors:[],					//大转盘奖品区块对应背景颜色
		outsideRadius:182,			//大转盘外圆的半径
		textRadius:155,				//大转盘奖品位置距离圆心的距离
		insideRadius:58,			//大转盘内圆的半径
		startAngle:0,				//开始角度
		bRotate:false				//false:停止;ture:旋转
};
var ransluck = [{$jilv}];//概率为比自己小的第一个数之间的差

$(document).ready(function(){
	$('#sbtn_guizhe').click(function (){
        layer.open({
            type: 1,
            title: '中奖规则',
            shadeClose: true,
            shade: 0.3,
            area: ['70%', '80%'],
			scrollbar:true,
            content: $('#guizhe').html(), 
        });
	});	
	$('#sbtn_zhongjiang').click(function (){
        layer.open({
            type: 2,
            title: '中奖记录',
            shadeClose: true,
            shade: 0.3,
            area: ['70%', '80%'],
			scrollbar:true,
            content:'/index.php/Mobile/Index/zhuanpan_log', 
        });
	});
	
$('.zhuangshi').toggleClass("rotate");
	//动态添加大转盘的奖品与奖品区域背景颜色 
	turnplate.restaraunts = [{$title}];
	turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"];
	
	var rotateTimeOut = function (){
		$('#wheelcanvas').rotate({
			angle:0,
			animateTo:2160,
			duration:8000,
			callback:function (){
				alert('网络超时，请检查您的网络设置！');
			}
		});
	};

	//旋转转盘 item:奖品位置; txt：提示语;
	var rotateFn = function (item, txt){
		var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
		if(angles<270){
			angles = 270 - angles; 
		}else{
			angles = 360 - angles + 270;
		}
		$('#wheelcanvas').stopRotate();
		$('#wheelcanvas').rotate({
			angle:0,
			animateTo:angles+1800,
			duration:8000,
			callback:function (){
				//中奖提示
				if(txt!='谢谢惠顾'){
					layer.msg('恭喜！中'+txt+'!', {icon: 6,time:3500});
					$.post("/index.php/Mobile/Index/zhuanpan_log?action=yes",{title:txt},function(data,status){
						data=JSON.parse(data);
						var jilv=JSON.parse(data.jilv);
						ransluck=jilv;
					});
				}else{
					layer.msg('抱歉！没中哦~继续加油!', {icon: 5,time:3500});
					}
				turnplate.bRotate = !turnplate.bRotate;
			}
		});
	};

	$('.pointer').click(function (){ //点击开始
		var mycishu=parseInt($('.jihui span').text());
		if(mycishu<=0){
			layer.msg('您的抽奖次数已经用完了哦~', {icon: 5,time: 3000});
			return;
		}
		if(turnplate.bRotate)return;
		turnplate.bRotate = !turnplate.bRotate;
		//获取随机数(奖品个数范围内)
		item = rnd(1,turnplate.restaraunts.length);
		//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
		
		//  switch (item) {
		// 	case 2:
		// 		rotateFn(-5, turnplate.restaraunts[1]);
		// 		break;
		// }
		//  switch (item) {
		// 	case 1:
		// 		rotateFn(252, turnplate.restaraunts[0]);
		// 		break;
		// 	case 2:
		// 		rotateFn(216, turnplate.restaraunts[1]);
		// 		break;
		// 	case 3:
		// 		rotateFn(180, turnplate.restaraunts[2]);
		// 		break;
		// }
		
		console.log(turnplate.restaraunts[item-1]);
		$.post("/index.php/Mobile/Index/zhuanpan?action=zp_cishu",{name:"ok",lipin:turnplate.restaraunts[item-1]},function(data,status){
			data=JSON.parse(data);
			
			$('.jihui span').html(data.cishu);
			var jilv=JSON.parse(data.jilv);
			ransluck=jilv;
			if(turnplate.restaraunts[item-1]!=undefined){
				rotateFn(item, turnplate.restaraunts[item-1]);console.log(item);
			}else{
				location.reload();
				}
		  });
		
	});
});

function rnd(n,m){
	n=1;//最小随机数
	m={$lipin[count($lipin)-1]['jilv']};//最大随机数（概率范围最大值）
	//最大数数不超过最大随机数
	var randoms = Math.floor(Math.random()*(m-n+1)+n);
	if(randoms<=ransluck[0])
	{
		var random = 1;
	}
	else if(randoms<=ransluck[1])
	{
		var random = 2;
	}
	else if(randoms<=ransluck[2])
	{
		var random = 3;
	}
	else if(randoms<=ransluck[3])
	{
		var random = 4;
	}
	else if(randoms<=ransluck[4])
	{
		var random = 5;
	}
	else if(randoms<=ransluck[5])
	{
		var random = 6;
	}
	else if(randoms<=ransluck[6])
	{
		var random = 7;
	}
	else if(randoms<=ransluck[7])
	{
		var random = 8;
	}
	console.log(randoms);
	// else if(randoms<=ransluck[8])
	// {
	// 	var random = 9;
	// }
	// else if(randoms<=ransluck[9])
	// {
	// 	var random = 10;
	// }
	//alert(randoms);
	//alert(random);
	return random;
	
}


//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload=function(){
	drawRouletteWheel();
};

function drawRouletteWheel() {    
  var canvas = document.getElementById("wheelcanvas");    
  if (canvas.getContext) {
	  //根据奖品个数计算圆周角度
	  var arc = Math.PI / (turnplate.restaraunts.length/2);
	  var ctx = canvas.getContext("2d");
	  //在给定矩形内清空一个矩形
	  ctx.clearRect(0,0,422,422);
	  //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
	  ctx.strokeStyle = "#FFBE04";
	  //font 属性设置或返回画布上文本内容的当前字体属性
	  ctx.font = '16px Microsoft YaHei';
	  for(var i = 0; i < turnplate.restaraunts.length; i++) {       
		  var angle = turnplate.startAngle + i * arc;
		  ctx.fillStyle = turnplate.colors[i];
		  ctx.beginPath();
		  //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
		  ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);    
		  ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
		  ctx.stroke();  
		  ctx.fill();
		  //锁画布(为了保存之前的画布状态)
		  ctx.save();   
		  
		  //----绘制奖品开始----
		  ctx.fillStyle = "#E5302F";
		  var text = turnplate.restaraunts[i];
		  var line_height = 17;
		  //translate方法重新映射画布上的 (0,0) 位置
		  ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
		  
		  //rotate方法旋转当前的绘图
		  ctx.rotate(angle + arc / 2 + Math.PI / 2);
		   
		  /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
		  if(text.indexOf("M")>0){ //流量包
			  var texts = text.split("M");
			  for(var j = 0; j<texts.length; j++){
				  ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
				  if(j == 0){
					  ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
				  }else{
					  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
				  }
			  }
		  }else if(text.indexOf("M") == -1 && text.length>6){	//奖品名称长度超过一定范围 
			  text = text.substring(0,6)+"||"+text.substring(6);
			  var texts = text.split("||");
			  for(var j = 0; j<texts.length; j++){
				  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
			  }
		  }else{
			  //在画布上绘制填色的文本。文本的默认颜色是黑色
			  //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
			  ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
		  }
		  
		  //添加对应图标
		 //  if(text.indexOf("{$lipin[0]['title']}")>0){
			//   var img= document.getElementById("pic1");
			//   img.onload=function(){  
			// 	  ctx.drawImage(img,-33,10);
			//   }; 
			//   ctx.drawImage(img,-33,10);
			// }
		<?php
		foreach($lipin as $key=>$v){
		?>
		  if(text.indexOf("{$v['title']}")>=0){
			  var img= document.getElementById("pic{$v['id']}");
			  img.onload=function(){
				  ctx.drawImage(img,-33,10); 
			  };  
			  //ctx.drawImage(img,-33,10);
		  }
		  <?php
		  }
		  ?>
		  //把当前画布返回（调整）到上一个save()状态之前 
		  ctx.restore();
		  //----绘制奖品结束----
	  }     
  } 
}

</script>
</body>
</html>